<template>
  <div class="Echarts">
    <div :id="id" style="width: 110rem; height: 35rem"></div>
  </div>
</template>
<!-- //以下是封装的折线图组件的js代码，只需要传入ref值和处理好格式series数组值就行 -->
<script>
export default {
  props: {
    //传进来用来绑定ref的唯一值
    id: {
      type: String
    }
    //传进来的数据
    // series: {
    //   type: Array,
    //   default() {
    //     return []
    //   },
    // },
  },
  data() {
    return {
      series: [],
      yData: [],
      xdata: []
    }
  },
  methods: {
    //  转换时间
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    // 转换x,y轴的格式
    getXY() {
      this.yData = []
      this.xdata = []
      for (let i = 0; i < this.series.length; i++) {
        if (this.series[i].xtimes.length > 0 && this.series[i].ydatas.length > 0) {
          this.xdata = []
          let ydata = []
          let yList = {}

          this.series[i].xtimes.forEach((item) => {
            this.xdata.push(this.getLocalTime(item))
          })
          this.series[i].ydatas.forEach((item) => {
            ydata.push(item.value)
          })
          yList = {
            name: `${this.series[i].fishpondName}`,
            data: ydata,
            type: 'line'
            // 最大值
            // markPoint: {
            //   itemStyle: { normal: { label: { color: "#FFFFFF" } } },
            //   data: [
            //     {
            //       type: "max",
            //       name: "最大值",
            //       itemStyle: { color: "#FF3A00" },
            //     },
            //     {
            //       type: "min",
            //       name: "最小值",
            //       itemStyle: { color: "#8898A8" },
            //     },
            //   ],
            // },
            // 平均值
            // markLine: {
            //   data: [
            //     {
            //       type: "average",
            //       name: "平均值",
            //       lineStyle: { color: "#00FCF9" },
            //     },
            //   ],
            // },
          }
          this.yData.push(yList)
        } else {
          this.myEcharts([], [])
        }
      }

      // console.log(xdata);
      this.myEcharts(this.xdata, this.yData)
    },
    myEcharts(xdata, ydata) {
      var myChart = this.$echarts.init(document.getElementById(`${this.id}`))

      var option = {
        legend: {
          //顶部每条折线的标识的配置项
          icon: 'circle', //    改变它的icon circle，rect ，roundRect，triangle
          itemWidth: 8, // 设置它的宽度
          itemHeight: 8, // 设置它的高度
          itemGap: 20, // 设置它的间距
          // orient: 'vertical',  //vertical是竖着显示 ，默认是横着
          // left: '70%',   //距离左边70%，也可用left,center,right
          y: '1%' //距离顶部的距离，也可以用center
          // textStyle:{    //icon后面的文字设置
          //   fontSize: 18,//字体大小
          //   color: '#ffffff'//字体颜色
          // }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          //X轴配置项
          type: 'category',
          data: xdata, //由于X轴也是动态的，我做了处理，看你需求，一般是写死的
          boundaryGap: false, //数据点从边缘开始
          axisLine: {
            show: false, //不显示坐标轴线
            //坐标轴颜色
            lineStyle: {
              color: '#0079B8'
            }
          },
          axisLabel: {
            //字体
            show: true,
            textStyle: {
              color: '#0079B8',
              fontSize: 12
            }
          },
          axisTick: {
            show: false //不显示X轴坐标刻度
          }
          // axisLabel:{//X轴的label配置项，我没有用到
          //   formatter: value=> {
          //     if(this.value == 'today'){
          //       return text;
          //     }else{
          //       return value;
          //     }
          //   }
          // }
        },
        grid: {
          //整个图例的大小，四个方向距离容器的距离，也可以用上下左右配置百分比
          x: 30,
          x2: 20,
          y: 40,
          y2: 30
          //containLabel: true
        },
        yAxis: {
          //Y轴配置项
          type: 'value',
          scale: true //x轴刻度不从0开始，自动获取区间
          //min:50,//设置最小区间，也可以设置max，如果设置了上面的scale就不生效了
        },
        //this.series,//这是决定有几条线的数据，处理成你要的数据格式，也可以写死，那就是下面的写法
        // series: [
        //   // {
        //   //   name: '图一', //每一项数据的名字，与legend关联
        //   //   data: [
        //   //     150, 230, 224, 218, 135, 147, 260, 110, 200, 124, 118, 235, 247,
        //   //     160,
        //   //   ], //具体数据
        //   //   type: 'line', //每一个点用线连接
        //   //   smooth: true,
        //   //   symbol: "circle",//折线节点为小圆点
        //   //   symbolSize: "5", //折线点大小

        //   // },
        //   // {
        //   //   name: '图二',
        //   //   data: [
        //   //     110, 200, 124, 118, 235, 247, 160, 150, 230, 224, 218, 135, 147,
        //   //     260,
        //   //   ],
        //   //   type: 'line',
        //   //   smooth: true,
        //   //   symbol: "circle",//折线节点为小圆点
        //   //   symbolSize: "5", //折线点大小

        //   // },
        // ],
        series: ydata
        // [
        //   {
        //     //   title:'大气温度',
        //     data: ydata,
        //     type: "line",
        //     smooth: true,
        //     markLine: {
        //       data: [
        //         {
        //           type: "average",
        //           name: "平均值",
        //           lineStyle: { color: "#00FCF9" },
        //         },
        //       ],
        //     },

        //   },
        // ],
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    // this.getXY()
  }
}
</script>
